@import "./_mixin";


.promotion{

	.p170711{
		background: #fff5b5;
		img{
			width:100%;
		}
		.banner{
			margin-top:0.0rem!important;
			background:none!important;
		}

		.share{
		    background: url(../../assets/images/promotion/170711/share-box.png) center center no-repeat;
		    width: 100%;
		    background-size:90%;
		    position: relative;
		    img{
		    	opacity:0;
		    }
			input[type="text"], textarea {
			    width: 80%;
			    left: 50%;
			    margin-left: -40%;
			    background: #fff;
			    border-radius: 0.1rem;
			    height: 1.4rem;
			    //line-height: 1rem;
			    padding: 0.125rem 0.25rem;
			    border: none;
			    position: absolute;
			    top: 2rem;
			    @include fz(16px);
			    z-index:90;
			}
			.note{
				width:80%;
			    left: 50%;
			    margin-left: -40%;
			    text-align:center;
			    position: absolute;
			    top: 3.6rem;
			    @include fz(16px);
			    b{
			    	color:red;
			    }
			    span{
			    	display:block;
			    	@include fz(16px);
			    	margin-top:0.1rem;
			    }
			}
			input[type="button"] {
			    width: 40%;
			    left: 50%;
			    margin-left: -20%;
			    background: #72a3ff;
			    border-radius: 0.1rem;
			    height: 1.0rem;
			    line-height: 1.0rem;
			    border: none;
			    position: absolute;
			    top: 3.8rem;
			    color: #fff;
			    @include fz(16px);
			    z-index:90;
			}
		}


		ul{

			li{
				width:45%;
				display:inline-block;
				float:left;
				margin-bottom:1rem;
				position:relative;
				&:after{
					content:' ';
					background: url(../../assets/images/promotion/170711/pro-170711-shadow1.png) center top no-repeat;
					height:54px;
					display:block;
					position:absolute;
					bottom:-54px;
					width:100%;
					opacity:0.4;
					background-size: 100%;
				}
				img{
					width:100%;
					opacity:0;
				}
				&.a5{
					background: url(../../assets/images/promotion/170711/pro-170711-item-5.png) center bottom no-repeat;
					background-size:100%;
				}
				&.a10{
					background: url(../../assets/images/promotion/170711/pro-170711-item-10.png) center bottom no-repeat;
					background-size:100%;
				}

				&.a100{
					background: url(../../assets/images/promotion/170711/pro-170711-item-100.png) center bottom no-repeat;
					background-size:100%;
				}
				&.a200{
					background: url(../../assets/images/promotion/170711/pro-170711-item-200.png) center bottom no-repeat;
					background-size:100%;
				}

				&.a500{
					background: url(../../assets/images/promotion/170711/pro-170711-item-500.png) center bottom no-repeat;
					background-size:100%;
				}
				&.a1000{
					background: url(../../assets/images/promotion/170711/pro-170711-item-1000.png) center bottom no-repeat;
					background-size:100%;
				}

				&:nth-child(even){
					margin-left:4%
				}
				&:nth-child(odd){
					margin-left:3%
				}



				.note{
					display:block;
					width:80%;
					position:absolute;
					top:35%;
					left:50%;
					margin-left:-40%;
					text-align:center;
					color:#fff;
					@include fz(14px);
				}

				a.btn{
					background: url(../../assets/images/promotion/170711/pro-170711-btn.png) center center no-repeat;
					background-size:95%;
					width:90%;
					display:inline-block;
					left:50%;
					margin-left:-45%;
					position:absolute;
					bottom:0rem;
					transition: 0.2s;
					opacity: 0.3;
					z-index:90;

				}
				a.btn.active{
					opacity: 1;
					cursor:pointer;
					animation:btnmove 1s infinite;
				}

				@keyframes btnmove
				{
					0% {transform: scale(1);opacity: 1;}
					50% {transform: scale(0.9);opacity: 0.9;}
					100% {transform: scale(1);opacity: 1;}
				}


			}
		}


	}

}
